import React, { useEffect, useState } from 'react'
import '../css/Hwj_index.css'
import { Toast, NavBar, Tag, Divider, Cell, Tabs, Sticky, Input, Uploader } from 'react-vant';
import { createFromIconfontCN } from '@react-vant/icons'
import { useLocation, useNavigate } from 'react-router-dom';
import { get, post } from '../../../axios/request'
const IconFont = createFromIconfontCN(
    '//at.alicdn.com/t/c/font_4695075_pl7cx9w2bje.js'
)
export default function Hwj_feedback() {
    let navigate = useNavigate()
    let location = useLocation()
    let [id, setId] = useState(location.state != null ? location.state.id : '')
    console.log(location.state.id);

    let [journey, setJourney] = useState([])
    let getjourney = async () => {
        let res = await get('/hwj/getjourney', { userid: '67073b3a316728bcfadbc349', _id: id })
        console.log(res.data);
        if (res.code === 200) {
            setJourney(res.data)
        }
    }
    let [value, setValue] = useState('')
    let addprogress = async () => {
        let obj = {
            ty: '司机绕路',
            txt: value,
            jid: location.state.id,
            sta:'处理中'
        }
        let res = await post("/hwj/addprogress",obj)
    }
    useEffect(() => {
        getjourney()
    }, [])

    return (
        <div id='feedbackbox'>
            <Sticky>
                <div className="headerbox">
                    <NavBar
                        title="问题反馈"
                        // leftText=""
                        // rightText="按钮"
                        onClickLeft={() => { navigate(-1) }}
                        onClickRight={() => Toast('按钮')}

                    />
                </div>
            </Sticky>
            {
                journey.map(i => (
                    <div key={i._id}>
                        <div className="conbox">
                            <div className='con_1'>
                                <h5>问题行程</h5>
                            </div>
                            <div className='con_2'>
                                <p>约车 {i.times}</p>
                                <Tag color="rgb(227, 227, 227)" textColor="grey">已完成</Tag>
                            </div>
                            <div className="con_3">
                                <div>
                                    <IconFont name='icon-yuandian' fontSize={25} />
                                    <span>{i.start}</span>
                                </div>
                                <div>
                                    <IconFont name='icon-yuandian-green' fontSize={25} />
                                    <span>{i.end}</span>
                                </div>
                            </div>
                            <Divider style={{ borderColor: 'rgb(227, 227, 227)' }} />
                            <div className='con_1'>
                                <h5>填写备注</h5>
                            </div>
                            <div className='con_4'>
                                <Input.TextArea placeholder="请详细描述行程中您遇到的问题" maxLength={50} showWordLimit value={value} onChange={setValue} />
                            </div>
                            <Divider style={{ borderColor: 'rgb(227, 227, 227)' }} />
                            <div className='con_1'>
                                <h5>上传凭证</h5>
                            </div>
                            <div className='con_4'>
                                <p>
                                    只支持jpg、png格式，一次最多上传5张，每张照片不大于500kb，若超过此险种，请直接联系客服。
                                </p>
                                <div
                                    style={{
                                        marginTop: '20px'
                                    }}>
                                    <Uploader
                                        accept='*'
                                        // defaultValue={defaultValue}
                                        onChange={v => console.log(v)}
                                    />
                                </div>
                            </div>
                        </div>

                        <div className='bottom_box'>
                            <button
                                onClick={() => { navigate('/hwj_progress');addprogress() }}
                                style={{ borderRadius: '50px', width: '80%', backgroundColor: 'rgb(255, 88, 16)', color: '#fff' }}>确定</button>
                        </div>
                    </div>
                ))
            }
        </div>
    )
}
